
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<%@ include file="/common/jsp/bootstrap.jsp" %>
<%@ include file="/common/jsp/page.jsp" %>
<%@ include file="/common/jsp/validator.jsp" %>

<title>登陆页面</title>
</head>
<body>
 <section>
    <section class="wrapper">
    	<h3><i class="fa fa-angle-right"></i>权限管理</h3>
    	
    	<!-- 添加 -->
		<button type="button" id="addUserBtn" class="btn btn-success"  data-toggle="modal" data-target="#myModal">添加</button>
		<!-- 删除--> <!--data-toggle="modal" data-target="#myModal" -->
		<button type="button" id="updateUserBtn" class="btn btn-info">修改</button>
		<!-- 修改 -->
		<button type="button" id="delUserBtn" class="btn btn-warning">删除</button>
    	<div class="row mt">
                  <div class="col-md-12">
                      <div class="content-panel">
                          <table class="table table-striped table-advance table-hover">
	                  	  	  <h4>
	                  	  	  	<i class="fa fa-angle-right"></i>
	                  	  	  </h4>
	                  	  	  <hr>
                              <thead>
                              <tr> 
                              	  <th><input type="checkbox"/></th>
                                  <th>ID</th>
                                  <th class="hidden-phone">权限URL</th> 
                                  <th>权限类型</th> 
                                  <th>父级id</th> 
                                  <th>菜单logo</th> 
                                  <th>权限名称</th>
                                  <th>权限编码</th>
                                  <th>是否锁定</th>
                                  <th>操作</th>
                              </tr>
                              </thead>
                              <tbody>
	                              <c:forEach var="permission" items="${pageInfo.list}">     
		                              <tr> 
		                              	  <td><input type="checkbox" value="${permission.id}"/></td>
		                              	  <td>${permission.id}</td>
		                              	  <td>${permission.permissionUrl}</td>
		                                  <td class="hidden-phone">
		                                  	<c:choose>
		                                  		<c:when test="${permission.type==1}">
		                                  			菜单
		                                  		</c:when>
		                                  		<c:otherwise>
		                                  			权限
		                                  		</c:otherwise>
		                                  	</c:choose>
		                                  </td>
		                                  <td>${permission.parentName}</td>
		                                  <td>${permission.menuLogo}</td>
		                                  <td>${permission.permissionName}</td>
		                                  <td>${permission.permissionCode}</td>
		                                  <td>
		                                  	<c:choose>
		                                  		<c:when test="${permission.isLock == 1}">
		                                  			锁定
		                                  		</c:when>
		                                  		<c:otherwise>
		                                  			正常
		                                  		</c:otherwise>
		                                  	</c:choose>
		                                  </td>
		                                  <td>
		                                      <button class="btn btn-primary btn-xs">删除</button>
		                                      <button class="btn btn-danger btn-xs">是否锁定</button> 
		                                  </td>
		                              </tr>
		                            
		                              	<c:forEach var="permission" items="${permission.childrenPermission}">  
		                              		  <tr>   
				                              	  <td><input type="checkbox" value="${permission.id}"/></td>
				                              	  <td>-第二级菜单</td>
				                              	  <td>${permission.permissionUrl}</td>
				                                  <td class="hidden-phone">
				                                  	<c:choose>
				                                  		<c:when test="${permission.type==1}">
				                                  			菜单
				                                  		</c:when>
				                                  		<c:otherwise>
				                                  			权限
				                                  		</c:otherwise>
				                                  	</c:choose>
				                                  </td>
				                                  <td>${permission.parentName}</td>
				                                  <td>${permission.menuLogo}</td>
				                                  <td>${permission.permissionName}</td>
				                                  <td>${permission.permissionCode}</td>
				                                  <td>
				                                  	<c:choose>
				                                  		<c:when test="${permission.isLock == 1}">
				                                  			锁定
				                                  		</c:when>
				                                  		<c:otherwise>
				                                  			正常
				                                  		</c:otherwise>
				                                  	</c:choose>
				                                  </td>
				                                  <td>
				                                      <button class="btn btn-primary btn-xs">删除</button>
				                                      <button class="btn btn-danger btn-xs">是否锁定</button> 
				                                  </td>
		                                   </tr>
		                                   		<c:forEach var="permission" items="${permission.childrenPermission}">  
				                              		  <tr>   
						                              	  <td><input type="checkbox" value="${permission.id}"/></td>
						                              	  <td></td>
						                              	  <td>${permission.permissionUrl}</td>
						                                  <td class="hidden-phone">
						                                  	<c:choose>
						                                  		<c:when test="${permission.type==1}">
						                                  			菜单
						                                  		</c:when>
						                                  		<c:otherwise>
						                                  			权限
						                                  		</c:otherwise>
						                                  	</c:choose>
						                                  </td>
						                                  <td>${permission.parentName}</td>
						                                  <td>${permission.menuLogo}</td>
						                                  <td>${permission.permissionName}</td>
						                                  <td>${permission.permissionCode}</td>
						                                  <td>
						                                  	<c:choose>
						                                  		<c:when test="${permission.isLock == 1}">
						                                  			锁定
						                                  		</c:when>
						                                  		<c:otherwise>
						                                  			正常
						                                  		</c:otherwise>
						                                  	</c:choose>
						                                  </td>
						                                  <td>
						                                      <button class="btn btn-primary btn-xs">删除</button>
						                                      <button class="btn btn-danger btn-xs">是否锁定</button> 
						                                  </td>
				                                   </tr>
			                              </c:forEach>
	                              </c:forEach>
		                             
	                              </c:forEach>
                              </tbody>
                          </table>
						  <div>
						  	<ul id="callBackPager"></ul>
						  </div>		                          
                      </div>
                  </div>
              </div>
 	</section>
</section>

<!-- 模态框弹出页面 -->
<div>
	<div id="myModal" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">添加权限</h4>
	      </div>
	      <div class="modal-body">
		      <form id="defaultForm" target="mainframe" method="post" class="form-horizontal" action="${ctx}/permission/addPermission.do">
		      	<input type="hidden" name="id" id="id"/> 
	            <div class="form-group">      
                      <label class="col-lg-3 control-label">权限URL</label> 
                      <div class="col-lg-5">   
                           <input type="text" class="form-control" name="permissionUrl" id="permissionUrl"/>
                      </div>
                  </div> 
                  <div class="form-group">
                      <label class="col-lg-3 control-label">权限类型</label> 
                      <div class="col-lg-5"> 
                      	<select class="form-control" name="type" id="type" >
                      		<option value="">请选择</option>
                      		<option value="1">菜单</option>
                      		<option value="2">权限</option>
                      	</select>
                      </div>
                  </div>      
                  <div class="form-group">
                      <label class="col-lg-3 control-label">父级id</label>  
                      <div class="col-lg-5">  
                           <select class="form-control" name="parentid" id="parentid">
	                      	</select>
                      </div>
                  </div> 
                  <div class="form-group">
                      <label class="col-lg-3 control-label">菜单logo</label> 
                      <div class="col-lg-5"> 
                           <input type="text" class="form-control" name="menuLogo" id="menuLogo"/>
                      </div>
                  </div>  
                  <div class="form-group">
                      <label class="col-lg-3 control-label">权限名称</label>  
                      <div class="col-lg-5"> 
                           <input type="text" class="form-control" name="permissionName" id="permissionName"/>
                      </div> 
                  </div>  
                  <div class="form-group">  
                      <label class="col-lg-3 control-label">权限编码</label>  
                      <div class="col-lg-5"> 
                           <input type="text" class="form-control" name="permissionCode" id="permissionCode"/>
                      </div>
                  </div>  
                  <div class="form-group">
                     <div class="col-lg-9 col-lg-offset-3">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					      <button type="submit" class="btn btn-primary">保存</button>
					      <button type="button" class="btn btn-primary" id="resetBtn">重置</button>
                      </div>
                  </div>      
              </form>
	      </div>
	      <!-- <div class="modal-footer">
	        
	      </div> -->
	    </div>
	  </div>
	</div>
	
	<div id="alertMessage" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">温馨提示</h4>
	      </div>
	      <div class="modal-body">
	      	<label id="message"></label>
	      </div>
	      <div class="modal-footer">
	          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
	<!-- 模板删除弹出框 -->
	<div id="deleteUser" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">确定删除选中的权限吗？</h4>
	      </div>
	      <div class="modal-footer">
		      <form id="deleteFrom" target="mainframe" style="display: none;" action="${ctx}/permission/permissionDel.do" method="post">
				 <input type="hidden" id="ids" name="ids"/>
			  </form>
	          <button type="button" id="delOk" class="btn btn-default">确定</button>
	          <button type="button" class="btn btn-default" data-dismiss="modal" >取消</button>
	      </div>
	    </div>
	  </div>
	</div>
</div>
<!-- 分页组建 -->
<form id="permissionForm" target="mainframe" style="display: none;" action="${ctx}/permission/permissionPage.do" method="post">
	<input type="hidden" id="currentPage" name="search_currentpage"/>
	<input type="hidden" id="pageSize" name="search_pageSize"/>
</form>

</body>
</html>
<script type="text/javascript">
	$(function(){
		debugger;
        $('#callBackPager').bootstrapPaginator({
        	bootstrapMajorVersion:3,
            currentPage: '${pageInfo.pageNum}',
            numberOfPages:"${pageInfo.pageSize}",
            totalPages:"${pageInfo.pages}",
            onPageClicked:function(event, originalEvent, type, page) 	{
            	$("#currentPage").val(page);
                $("#pageSize").val(10);
                $("#permissionForm").submit();
            }
        });

        
	 /*  $('#saveUser').click(function() {//与提交按钮有相同的效果
		  debugger;
	     var rst = $('#defaultForm').bootstrapValidator('validate');
	  }); */

      $('#resetBtn').click(function() {//重置表单
         $('#defaultForm').data('bootstrapValidator').resetForm(true);
      });
	  
	  //用户点击添加按钮
	  $("#addUserBtn").click(function(){
		  //重置表单中的信息
		  $('#defaultForm').data('bootstrapValidator').resetForm(true);
	  });
	  
	  //用户点击修改按钮
	  $("#updateUserBtn").click(function(){
		  var checkboxs =$(".table").find("input[type=checkbox]:checked");
		  if(checkboxs.length != 1){
			  $("#message").html("请选择一项您需要修改的角色！");
			  $("#alertMessage").modal('show');
			  return;
		  }
		  //查询 用户信息
		  getPermissionInfo(checkboxs[0].value);
		  $("#myModal").modal('show');
	  });
	  
	  //用户点击删除按钮
	  $("#delUserBtn").click(function(){
		  var checkboxs = $(".table").find("input[type=checkbox]");
		  var isCheckedBox = "";
		  for(var i= 0 ; i < checkboxs.length ;i ++){
			  var checkbox = checkboxs[i];
			  if(checkbox.checked){//选中 的
				  if(isCheckedBox == ""){
					  isCheckedBox = checkbox.value;
				  }else{
					  isCheckedBox += ","+checkbox.value;
				  }
			  }
		  }
		  if(isCheckedBox == "" ){
		      $("#message").html("您还未选择需要删除的数据！");
		      $("#alertMessage").modal('show');
		      return;
	      }
		  $("#ids").val(isCheckedBox);
		  $("#deleteUser").modal('show');
		
	  });
	  
	  //删除确定按钮
	  $("#delOk").click(function(){
		  //和后台进行数据交互删除数据
		  $("#deleteFrom").submit();
	  });
	  
	  //查询所有的菜单  用户切换 
	  $("#type").change(function(){
		  debugger;
		 var val= $(this).val();
		 if(val == "1"){//如果是 菜单
			//获取菜单列表
			 queryPermissionMenu(val);
		 }else{//权限
			 //获取菜单列表
			 queryPermissionMenu(val);
		 }
	  });
	  //获取角色信息
	  function  getPermissionInfo(permissionId) {
		  $.ajax({
				url:"${ctx}/permission/getPermissionInfo.do",
				type:"post",
				data:{"permissionId":permissionId},
				aysnc:"false",
				success:function(data){
					debugger;
					var code = data.code;
					if(code == 200){
						var permission = data.permission;
						$("#id").val(permission.id);
						$("#permissionUrl").val(permission.permissionUrl);
						$("#type").val(permission.type);
						$("#parentid").val(permission.parentid);
						$("#menuLogo").val(permission.menuLogo);
						$("#permissionName").val(permission.permissionName);
						$("#permissionCode").val(permission.permissionCode);
					}else{
						$("#message").html("获取用户信息失败");
						$("#alertMessage").modal('show');
					}
				}
			});
	  }
	  
	  //查询权限菜单列表
	  function queryPermissionMenu(val){
		  $.ajax({
				url:"${ctx}/permission/queryPermissionMenu.do",
				type:"post",
				data:{"type":val},
				aysnc:"false",
				success:function(data){
					var menus = data.menus;
					var str="<option value=''>请选择</option>";
					for(var i= 0 ; i< menus.length ; i++ ){
						var menu = menus[i];
						str +="<option value='"+menu.id+"'>"+menu.permissionName+"</option>";
					}
					$("#parentid").html("");
					$("#parentid").append(str);
				}
			});
		  
	  }
	  
	  
	  $('#defaultForm').bootstrapValidator({
//        live: 'disabled', //      
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }, 
        fields: {
        	permissionUrl: { 
                validators: {
                    notEmpty: {
                        message: '请求链接不能为空'
                    }
                }
            },type: { 
                validators: {
                    notEmpty: {
                        message: '菜单类型不能为空'
                    }
                }
            },permissionName: { 
                validators: {
                    notEmpty: {
                        message: '权限名称不能为空'
                    }
                }
            },permissionCode: { 
                validators: {
                    notEmpty: {
                        message: '权限编码不能为空'
                    }
                }
            }
        }   
    });
});
	
</script>
